<template>
  <div class="CommonTextarea">
    <div class="label" :class="{ required }">{{ label }}</div>
    <textarea
      class="textarea"
      type="text"
      v-model="currentValue"
      :placeholder="placeholder"
      maxlength="-1"
      autoHeight
      :placeholder-style="placeholdeStyle"
      @focus="$emit('focus')" />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    required: {
      type: Boolean,
    },
    disabled: {
      type: Boolean,
    },
    placeholdeStyle: {
      type: Object,
      default () {
        return {}
      },
    },
  },
  data () {
    return {
      currentValue: null,
    }
  },
  watch: {
    value: {
      immediate: true,
      handler () {
        this.currentValue = this.value
      },
    },
    currentValue: {
      handler () {
        this.$emit('input', this.currentValue)
      },
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.CommonTextarea {
	.label {
		@include label;
	}

	.textarea {
		box-sizing: border-box;
		width: 100%;
		min-height: 115px;
		padding: 16px;
		border: 1px solid #e6e6e6;
		border-radius: 3px;
		line-height: 22px;
	}
}
</style>
